<template>
  <div class="yzh-basic" v-show="false">
    <div class="flex justify-between pb-5 items-center">
      <TitleName
        title="回款情况"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName>
      <el-row class="w-8/12 items-center" :gutter="20" justify="space-between">
        <el-col :span="14">
          订单总金额：<span class="text-blue-500"
            >¥{{ countCrudData.orderPrice }}</span
          >
          已回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.repaymentPrice }}</span
          >未回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.unRepaymentPrice }}</span
          >
          逾期回款金额：<span class="text-blue-500"
            >¥{{ countCrudData.overduePrice }}</span
          ></el-col
        >
        <el-col :span="5">
          <el-button class="w-full" type="primary" @click="handleUpdate">
            配置回款计划</el-button
          ></el-col
        ><el-col :span="5">
          <el-button class="w-full" type="primary" plain @click="handleAdd"
            >添加回款记录</el-button
          >
        </el-col>
      </el-row>
    </div>
    <RepaymentPlan :dataList="planData.list" :countData="planData.count" />
    <RepaymentRecord :dataList="recordData.list" />
  </div>
</template>
<script setup name="RepaymentInfo">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
import {
  order_business_type //订单业务板块
} from '@/hooks/dict/order'
import { getRepaymentDetail } from '@/api/repaymentManage/repayment'
import RepaymentPlan from '@/views/financialManage/repaymentManage/modules/repaymentPlan'
import RepaymentRecord from '@/views/financialManage/repaymentManage/modules/repaymentRecord'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  orderId: {
    type: [Number, String],
    require: true
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const sortOptions = ref([])
const companyData = ref([])
commonStore.getCompanyData().then(e => {
  companyData.value = e
})
const data = reactive({
  formData: [],
  countCrudData: {
    orderPrice: '-', //订单总金额
    repaymentPrice: '-', //已回款金额
    unRepaymentPrice: '-', //未回款金额
    overduePrice: '-' //逾期回款金额
  },
  planData: {
    list: [],
    count: {}
  },
  recordData: {
    list: []
  },
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})
let { formData, countCrudData, planData, recordData, total, queryParams } =
  toRefs(data)

watch(
  () => props.orderId,
  () => {
    if (props.orderId) {
      // getFormData(props.orderId)
    }
  },
  {
    immediate: true
  }
)
// 获取表单信息
function getFormData(id) {
  getRepaymentDetail(id).then(async res => {
    let resData = {}
    resData = res.data
    formData.value = res.data
    let {
      allPeriod, //总期次
      repaymentProportion, //总回款占比
      orderPrice, //订单总金额
      repaymentPrice, //已回款金额
      unRepaymentPrice, //未回款金额
      overduePrice, //逾期回款金额
      payPlanList, //回款期次
      repaymentList //回款记录
    } = resData
    countCrudData.value = {
      orderPrice,
      repaymentPrice,
      unRepaymentPrice,
      overduePrice
    }

    planData.value.count = {
      orderPrice,
      allPeriod,
      repaymentProportion,
      repaymentPrice
    }
    console.log('payPlanList==>', payPlanList)
    planData.value.list = payPlanList
    // recordData.value.list = repaymentList
  })
  recordData.value.id = id
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 配置回款计划
function handleUpdate() {
  goTo('/financial/repaymentPlanForm', { salesOrderId: props.orderId })
}
//  添加回款记录
function handleAdd() {
  let { customerId, customerName, orderId, orderTitle } = formData.value
  goTo('/financial/repaymentForm', {
    repaymentData: JSON.stringify({
      customerId,
      customerName,
      orderId,
      orderTitle
    })
  })
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
